<script setup lang="ts">
import { createSession, sendMessage } from '@/api/message';
import { Session } from '@/api/message/type';
import { Ref, ref } from 'vue';
import { showNotify } from 'vant';

const userId = defineModel("userId") as Ref<string>;
const session = defineModel("session") as Ref<Session>;
const emit = defineEmits(['send']);
const msg = ref('');
const sending = ref(false);

const clear = () => {
    msg.value = '';
}

const send = async () => {
    if (!msg.value.trim()) return;
    if (sending.value) return;
    
    try {
        sending.value = true;
        
        // 如果没有会话ID，创建新会话
        if (session.value.id === undefined && session.value.receiverId !== undefined) {
            const res = await createSession(session.value);
            session.value = res.data as Session;
        }
        
        // 发送消息
        await sendMessage(session.value.id, userId.value, msg.value);
        
        // 清空输入框
        msg.value = '';
        
        // 通知父组件刷新消息列表
        emit('send');
    } catch (error) {
        console.error('发送消息失败:', error);
        showNotify({
            type: 'danger',
            message: '发送失败，请重试',
            position: 'top'
        });
    } finally {
        sending.value = false;
    }
}

// 处理回车键发送
const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        send();
    }
}
</script>

<template>
    <div class="chat-input-container">
        <div class="input-actions left">
            <button class="action-btn">
                <van-icon name="smile-o" />
            </button>
            <button class="action-btn">
                <van-icon name="photo-o" />
            </button>
        </div>
        
        <div class="input-field">
            <van-field
                v-model="msg"
                type="textarea"
                placeholder="输入消息..."
                rows="1"
                autosize
                class="message-textarea"
                :clearable="true"
                @clear="clear"
                @keydown="handleKeyDown"
            />
        </div>
        
        <div class="input-actions right">
            <van-button
                :disabled="!msg.trim()"
                :loading="sending"
                type="primary"
                size="small"
                round
                class="send-btn"
                @click="send"
            >
                发送
            </van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.chat-input-container {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    
    .input-actions {
        display: flex;
        align-items: center;
        
        &.left {
            margin-right: 8px;
            gap: 8px;
        }
        
        &.right {
            margin-left: 8px;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            
            &:hover {
                background-color: rgba(0, 0, 0, 0.05);
            }
            
            .van-icon {
                font-size: 22px;
                color: #646566;
            }
        }
        
        .send-btn {
            min-width: 70px;
            height: 36px;
            font-size: 14px;
            font-weight: 500;
        }
    }
    
    .input-field {
        flex: 1;
        
        :deep(.van-cell) {
            padding: 8px 12px;
            background-color: #f2f3f5;
            border-radius: 18px;
            box-shadow: none;
        }
        
        :deep(.van-field__control) {
            min-height: 20px;
            max-height: 120px;
        }
    }
}
</style>